<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据字典管理页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/js/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <!--引入我们在https://www.iconfont.cn平台生成的图标样式库-->
    <link rel="stylesheet" href="/layui/css/modules/layui-icon-extend/iconfont.css" media="all">
    <style>
        .ztree li {
            line-height: 27px;
        }

        .ztree li span.button {
            width: 18px;
            height: 26px;
        }

        .ztree li span.button.ico_open {
            margin-top: 5px;
            margin-right: 0px;
        }

        .ztree li span.button.ico_docu {
            margin-top: 5px;
        }

        .ztree li a.curSelectedNode {
            height: 26px;
        }

        div#rightMenu{
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #e6e6e6;
            text-align: left;
            padding: 2px;
        }

        div#rightMenu ul li{
            margin: 1px 0;
            padding: 4px 15px 3px 15px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #009688;
            color: #ffffff;
        }
    </style>
</head>
<body>
<!--
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>卡片面板</legend>
</fieldset>
-->
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">数据字典类型</div>
                <div class="layui-card-body">
                    <button type="button" class="layui-btn" id="addDicTypeButton">新增字典类型</button>
                    <div id="treeMultiple" class="ztree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">数据字典信息</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="dicInfoTable" lay-filter="dicInfoTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--新增/编辑窗口(数据字典类型)-->
<div class="layui-row operationDicType" id="addDicTypeLayer" style="display:none;">
    <form class="layui-form layui-form-pane" action="" style="margin-top: 10px;margin-left: 10px;margin-right: 10px;" lay-filter="dicTypeEditFilter" autocomplete="off">
        <input name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">类型编码</label>
            <div class="layui-input-block">
                <input type="text" id="dicTypeCode" name="typeCode" placeholder="请输入字典类型编码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">类型名称</div>
            <div class="layui-input-block">
                <input type="text" name="typeName" placeholder="请输入字典类型名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">状态</div>
            <div class="layui-input-block">
                <select name="status" class="select">
                    <option value="">请选择状态</option>
                    <option value="0">不可用</option>
                    <option value="1">可用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div style="text-align: center;">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="dicTypeSubmit">保存</button>
            </div>
        </div>
    </form>
</div>

<!--新增/编辑窗口(数据字典)-->
<div class="layui-row operationDicType" id="addDicInfoLayer" style="display:none;">
    <form id="dicInfo" class="layui-form layui-form-pane" action="" style="margin-top: 10px;margin-left: 10px;margin-right: 10px;" lay-filter="dicInfoEditFilter" autocomplete="off">
        <input name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">类型编码</label>
            <div class="layui-input-block">
                <input type="text" id="typeCode" name="typeCode" placeholder="请输入数据字典类型编码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">状态</div>
            <div class="layui-input-block">
                <select name="status" class="select">
                    <option value="">请选择状态</option>
                    <option value="1">可用</option>
                    <option value="0">不可用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">字典编码</label>
            <div class="layui-input-block">
                <input type="text" id="dicCode" name="dicCode" placeholder="请输入数据字典编码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">字典名称</div>
            <div class="layui-input-block">
                <input type="text" id="dicValue" name="dicValue" placeholder="请输入数据字典名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div style="text-align: center;">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="dicInfoSubmit">保存</button>
            </div>
        </div>
    </form>
</div>
<div id="rightMenu">
    <ul>
        <li id="editDicType">
            编辑
        </li>
        <li id="deleteDicType">
            删除
        </li>
    </ul>
</div>
</body>
<script type="text/html" id="dicInfoToolbar">
    <div class="layui-btn-group">
        <button shiro:hasPermission="sys:dic:addDicInfo" type="button" class="layui-btn" lay-event="add">
            <i class="layui-icon">&#xe608;</i> 新增数据字典
        </button>
    </div>
</script>
<script type="text/html" id="dicTypeTool">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="sys:dic:updateDicType">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="sys:dic:deleteDicType">删除</a>
</script>
<script type="text/html" id="dicInfoTool">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="sys:dic:updateDicInfo">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="sys:dic:deleteDicInfo">删除</a>
</script>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script type="text/javascript" src="/js/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/js/zTree_v3/js/jquery.ztree.excheck.js"></script>

<script th:inline="none">
    let table = layui.table;
    let laypage = layui.laypage;
    let form = layui.form;
    let layer = layui.layer;
    let $2 = jQuery = layui.jquery;
    let typeCode = '-1001';
    let typeName = '';
    layui.use(['table', 'laypage', 'layer'], function () {
        let searchDicTypeParam = {
            pageNum: 1,
            pageSize: 10,
            typeName: ''
        };

        //渲染数据字典详情table
        let loadDicInfoTable = function (data) {
            table.render({
                elem: '#dicInfoTable'
                , cols: [
                    [
                        {type: 'xuhao', fixed: 'left', title: '序号', width: 50, type: 'numbers'},
                        {field: 'typeCode', title: '字典类型编码', width: 200, sort: true},
                        {field: 'dicCode', title: '字典编码', width: 200},
                        {field: 'dicValue', title: '字典字典名称', width: 200},
                        {
                            field: 'status', title: '状态', width: 100, templet: function (item) {
                                if (item.status == 0) {
                                    return '<span class="layui-badge layui-bg-orange">不可用</span>';
                                }
                                else if (item.status == 1) {
                                    return '<span class="layui-badge layui-bg-green">可用</span>';
                                }
                                else {
                                    return '<span class="layui-badge layui-bg-green">未知</span>';
                                }
                            }
                        },
                        {field: 'updateUserName', title: '更新人', width: 150},
                        {field: 'updateTime', title: '更新时间', sort: true, width: 220},
                        {width: 150, toolbar: "#dicInfoTool", title: '操作', fixed: 'right'}
                    ]
                ]
                , data: data
                , even: true
                , limit: data.length
                , toolbar: '#dicInfoToolbar'
            });
        };

        //监听行单击事件（单击事件为：row；双击事件为：rowDouble）
        table.on('rowDouble(dicTypeTable)', function (obj) {
            let data = obj.data;
            typeCode = '';
            typeCode = data.typeCode;
            typeName = data.typeName;
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            //根据字典类型编码查询数据字典详情
            reloadDicTable();
        });

        //刷新数据字典表格
        let reloadDicTable = function () {
            CoreUtil.sendAjax("/sys/dic/getAllDicByTypeCode/" + typeCode, null, function (res) {
                if (res.data != null) {
                    loadDicInfoTable(res.data);
                }
            }, "GET", false, function (res) {
                layer.msg(res.msg);
            });
        };

        //监听submit编辑/新增弹框-数据字典类型
        form.on('submit(dicTypeSubmit)', function (data) {
            if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                CoreUtil.sendAjax("/sys/dic/addDicType", JSON.stringify(data.field), function (res) {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    initObjectTree();
                    showDicTable("1wewewewewe1");
                    layer.msg(res.msg);
                }, "POST", false, function (res) {
                    layer.msg(res.msg);
                });
            } else {
                CoreUtil.sendAjax("/sys/dic/updateDicType", JSON.stringify(data.field), function (res) {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    initObjectTree();
                    showDicTable("1wewewewewe1");
                    layer.msg(res.msg);
                }, "PUT", false, function (res) {
                    layer.msg(res.msg);
                });
            }
            return false;
        });

        //监听submit编辑/新增弹框-数据字典
        form.on('submit(dicInfoSubmit)', function (data) {
            if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                CoreUtil.sendAjax("/sys/dic/addDicInfo", JSON.stringify(data.field), function (res) {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    layer.msg(res.msg);
                    showDicTable(data.field.typeCode);
                }, "POST", false, function (res) {
                    layer.msg(res.msg);
                });
            } else {
                CoreUtil.sendAjax("/sys/dic/updateDicInfo", JSON.stringify(data.field), function (res) {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    layer.msg(res.msg);
                    showDicTable(data.field.typeCode);
                }, "PUT", false, function (res) {
                    layer.msg(res.msg);
                });
            }
            //置空
            $2("#dicCode").val('');
            $2("#dicValue").val('');
            return false;
        });

        //监听新增数据字典类型按钮
        $2("#addDicTypeButton").click(function(){
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                resize: false, //是否允许拉伸
                maxmin: false, //最大最小化
                title: "新增数据字典类型",
                area: ['650px', '400px'],
                content: $2("#addDicTypeLayer") //引用的弹出层的页面层的方式加载修改界面表单
            });
        });

        //表头工具栏事件-数据字典
        table.on('toolbar(dicInfoTable)', function (obj) {
            switch (obj.event) {
                case 'add':
                    let zTree = $.fn.zTree.getZTreeObj("treeMultiple");
                    let selectNode = zTree.getSelectedNodes();
                    // console.log(selectNode);
                    if(selectNode.length == 0){
                        layer.msg("请选择数据字典类型！");
                        return;
                    }
                    if(selectNode[0].typeCode == '1010101010'){
                        layer.msg("请选择具体数据字典类型！");
                        return;
                    }
                    $2("#dicCode").attr("readonly", false);
                    // console.log("selectNode[0].typeCode="+selectNode[0].typeCode);
                    $2("#typeCode").attr("readonly", true);
                    form.val("dicInfoEditFilter", {
                        "id": ''
                        , "typeCode": selectNode[0].typeCode
                        , "dicCode": ''
                        , "dicValue": ''
                        , "status": ''
                    });
                    form.render();
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        resize: false, //是否允许拉伸
                        maxmin: false, //最大最小化
                        title: "新增数据字典",
                        area: ['650px', '400px'],
                        content: $2("#addDicInfoLayer") //引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;
            }
        });

        //编辑信息时回显数据-数据字典类型
        function setDicTypeFormValue(data) {
            form.val("dicTypeEditFilter", {
                "id": data.id
                , "typeCode": data.typeCode
                , "typeName": data.typeName
                , "status": data.status
            });
        }

        //编辑信息时回显数据-数据字典
        function setDicInfoFormValue(obj) {
            let data = obj.data;
            //编辑时不能修改字典编码
            $2("#dicCode").attr("readonly", true);
            form.val("dicInfoEditFilter", {
                "id": data.id
                , "typeCode": data.typeCode
                , "dicCode": data.dicCode
                , "dicValue": data.dicValue
                , "status": data.status
            });
            form.render();
        }

        //操作工具栏事件-数据字典
        table.on('tool(dicInfoTable)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'del':
                    deleteDicInfoDialog(data);
                    break;
                case 'edit':
                    $2("#typeName").val(typeName);
                    $2("#dicCode").val("");
                    $2("#dicValue").val("");
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        resize: false, //是否允许拉伸
                        maxmin: false, //最大最小化
                        title: "编辑数据字典",
                        area: ['650px', '400px'],
                        content: $2("#addDicInfoLayer") //引用的弹出层的页面层的方式加载修改界面表单
                    });
                    //回显数据，填充表格
                    setDicInfoFormValue(obj);
                    break;
            }
        });

        //删除数据前确认对话框-数据字典
        let deleteDicInfoDialog = function (data) {
            layer.open({
                content: '确定要删除该记录吗？',
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendAjax("/sys/dic/deleteDicInfo/" + data.id, null, function (res) {
                        layer.msg(res.msg);
                        showDicTable(data.typeCode);
                    }, "DELETE", false, function (res) {
                        layer.msg(res.msg);
                    });
                }
            });
        };

        let zTreeSetting = {
            view: {
                fontCss: setNodeCss,
                showTitle: true //鼠标滑过显示title
            },
            callback: {  //点击文字，将节点设置为选中
                onRightClick: zTreeOnRightClick,//节点右击事件
                onClick: zTreeOnCheck//节点单击事件
            },
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id", //节点数据中保存唯一标识的属性名称
                    pIdKey: "pid", //节点数据中保存其父节点唯一标识的属性名称
                    rootPId: 0 //根节点id
                },
                key: {
                    title: "title"//鼠标滑过显示title
                }
            }
        };

        //设置节点CSS样式
        function setNodeCss(treeId, treeNode){
            // console.log("treeId="+treeId+";treeNode="+treeNode);
            if(treeNode.status == 0){
                //不可用
                return {color:"#c5c3c3"};
            }else{
                //可用
                return {color:"#203e82"};
            }
        }

        //显示数据字典详情
        let showDicTable = function (typeCodeVar) {
            // console.log(typeCodeVar);
            CoreUtil.sendAjax("/sys/dic/getAllDicByTypeCode/" + typeCodeVar, null, function (res) {
                if (res.data != null) {
                    loadDicInfoTable(res.data);
                }
            }, "GET", false, function (res) {
                layer.msg(res.msg);
            });
        };

        //监听节点单击事件
        function zTreeOnCheck(event, treeId, treeNode){
            // console.log(treeNode);
            let zTree = $.fn.zTree.getZTreeObj("treeMultiple");
            zTree.checkNode(treeNode, true, true);
            // zTree.checkNode(treeNode, !treeNode.checked, true);//选中则置为不选中，不选中则置为选中
            showDicTable(treeNode.typeCode);
            $2("#typeCode").val(treeNode.typeCode);
        }

        //编辑数据字典类型
        $2('#editDicType').on('click', function () {
            // console.log("编辑数据字典类型");
            let zTree = $.fn.zTree.getZTreeObj("treeMultiple");
            let selectNode = zTree.getSelectedNodes();
            // console.log(selectNode);
            let obj = {
                id: null,
                typeCode: null,
                typeName: null,
                status: null
            };
            if(selectNode != null && selectNode.length > 0 && selectNode[0] != null){
                obj.id = selectNode[0].id;
                obj.typeCode = selectNode[0].typeCode;
                obj.typeName = selectNode[0].name;
                obj.status = selectNode[0].status;
            }
            $2("#dicTypeCode").attr("readOnly", "true");//编辑时，无法修改数据字典类型编码
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                resize: false, //是否允许拉伸
                maxmin: false, //最大最小化
                title: "编辑数据字典类型",
                area: ['650px', '400px'],
                content: $2("#addDicTypeLayer") //引用的弹出层的页面层的方式加载修改界面表单
            });
            //回显数据，填充表格
            setDicTypeFormValue(obj);
        });

        //删除数据字典类型
        $2('#deleteDicType').on('click', function () {
            console.log("删除数据字典类型");
            let zTree = $.fn.zTree.getZTreeObj("treeMultiple");
            let selectNode = zTree.getSelectedNodes();
            layer.open({
                content: '确定要删除该数据字典类型吗？',
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendAjax("/sys/dic/deleteDicType/" + selectNode[0].typeCode, null, function (res) {
                        layer.msg(res.msg);
                        initObjectTree();
                        showDicTable("1wewewewewe1");
                    }, "DELETE", false, function (res) {
                        layer.msg(res.msg);
                    });
                }
            });
        });

        //显示右击菜单
        function showRMenu(type, x, y, treeNode) {
            // console.log("type="+type+",x="+x+",y="+y+",treeNode="+treeNode);
            // console.log(treeNode.typeCode);
            if(treeNode.typeCode != '1010101010'){
                $2('rightMenu ul').show();
                //设置右键菜单的位置、可见
                $2("#rightMenu").css({
                    "top": y+"px",
                    "left": (x+10)+"px",
                    "visibility": "visible"
                });
                $2("body").bind("mousedown", onBodyMouseDown);
            }else{
                layer.msg("请选择字典类型节点");
            }
        }

        //鼠标点击事件
        function onBodyMouseDown(event) {
            console.log("节点已经点击");
            if(!(event.target.id == "rightMenu" || $2(event.target).parents("#rightMenu").length > 0)){
                $2(rightMenu).css({
                    "visibility":"hidden"
                });
            }
        }

        //监听节点右击事件
        function zTreeOnRightClick(event, treeId, treeNode){
            //将节点选中
            let zTree = $.fn.zTree.getZTreeObj("treeMultiple");
            let selectNode = zTree.getSelectedNodes();
            if(selectNode != null && selectNode.length > 0){
                if(treeNode.id != null){
                    //显示右键菜单
                    showRMenu("node", event.clientX, event.clientY, treeNode);
                }
            }else{
                layer.msg("请先选择节点");
            }
        }

        //初始化数据字典类型树型
        let initObjectTree = function () {
            CoreUtil.sendAjax("/sys/dic/dicTypeTree", null, function (res) {
                // console.log(res.data);
                $.fn.zTree.init($("#treeMultiple"), zTreeSetting, res.data);
                // 获取树对象
                let treeObj = $.fn.zTree.getZTreeObj("treeMultiple");
                /* 获取所有树节点 */
                let nodes = treeObj.transformToArray(treeObj.getNodes());
                // 展开除第一级之外的其他节点
                for (let i = 0, length_1 = nodes.length; i < length_1; i++) {
                    if (nodes[i].level == 0) {
                        continue;
                    }
                    nodes[i].open = true;
                }
                //展开第一级节点
                treeObj.expandNode(nodes[0], true);
            }, "GET", false);
        };

        $2(function () {
            initObjectTree();
            showDicTable("1wewewewewe1");
        });
    });
</script>
</html>